<template>
  <div class="pull-right" style="min-width:150px;">
    <ul class="tab-label pull-right">
      <li
        :class="['tab-label-item pull-left f-ml8',item.active ? 'active':'']"
        v-for="(item,index) in labelList"
        :key="index"
        @click="clickItem(item)"
      >{{item.title}}</li>
    </ul>
    <Select
      v-model="select.value"
      filterable 
              placeholder="请输入关键词搜索"
      size="small"
      class="pull-right"
      style="width:100px"
      v-if="select.list"
    >
      <Option v-for="item in select.list" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
  </div>
</template>
<script>
export default {
  props: {
    labelList: {
      type: Array,
      default: []
    },
    select: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    clickItem(item) {
      this.labelList.map(item => (item.active = false));
      item.active = true;
      this.$emit("input", item.title);
    }
  }
};
</script>
<style lang="scss" scoped>
.pull-right{
  padding-top:3px;
/deep/.ivu-select-selection{
  height: 22px;
}
.tab-label-item {
  cursor: pointer;
  background: #b7b7b7;
  padding: 3px 10px;
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  border-radius: 2px;
  &.active {
    background-color:#1890ff;
  }
}
}
</style>